<template>
  <div class="app-container calendar-list-container">
    <el-form label-position="left" label-width="100px">
      <el-row>
        <el-col :span="12">
          <el-card class="box-card">
            <p class="form-header">
              <svg-icon icon-class="ds-person" />个人信息
              <a class="update-pass" @click="handleUpdate()">修改密码</a>
            </p>
            <el-form-item label="姓名">
              {{param.truename}}
            </el-form-item>
            <el-form-item label="账号">
              {{param.username}}
            </el-form-item>
            <el-form-item label="状态">
              {{param.status_text}}
            </el-form-item>
            <el-form-item label="手机号">
              {{param.mobile}}
            </el-form-item>
            <el-form-item label="创建时间" v-if="param.create_at === null">
              无
            </el-form-item>
            <el-form-item label="创建时间" v-else>
              {{param.create_at | parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}
            </el-form-item>
            <el-form-item label="修改时间" v-if="param.update_at === null">
              无
            </el-form-item>
            <el-form-item label="修改时间" v-else>
              {{param.update_at | parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}
            </el-form-item>
            <el-form-item label="分组">
              <el-row v-for="(item, index) in param.group" :key="index">
                <el-col :span="6">{{item.g_name}}</el-col>
                <el-col :span="4" v-if="item.is_admin === '普通成员'" class="normal-person"><svg-icon icon-class="ds-normal-person" /> {{item.is_admin}}</el-col>
                <el-col :span="4" v-else class="high-person"><svg-icon icon-class="ds-high-person" /> {{item.is_admin}}</el-col>
                <el-col :span="11" :offset="1">{{item.auth}}</el-col>
              </el-row>
            </el-form-item>
          </el-card>
        </el-col>
      </el-row>
    </el-form>

    <el-dialog width="30%" :title="'修改密码'" :visible.sync="dialogFormVisible" @close="resetTemp">
      <el-form :rules="rules" status-icon ref="dataForm" :model="temp" label-position="left" label-width="100px" style='width: 80%; margin-left:50px;'>
        <el-form-item label="原始密码" prop="oldpass">
          <el-input v-model="temp.oldpass" :maxlength="50"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="pwd">
          <el-input v-model="temp.pwd" :maxlength="50"></el-input>
        </el-form-item>
        <el-form-item label="确认新密码" prop="renewpass">
          <el-input v-model="temp.renewpass" :maxlength="50"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateData">保存</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<style scoped>
  .normal-person {
    color: #4ebef6;
  }
  .high-person {
    color: #fc9336;
  }
  .text {
    font-size: 14px;
  }
  .box-card .el-form-item {
    margin-bottom: 11px;
    padding-bottom: 11px;
    border-bottom: solid 1px #eee;
  }
  .box-card .el-form-item:last-child {
    border: none;
  }
  .box-card .el-form-item .el-row {
    line-height: 50px;
    border-bottom: solid 1px #eee;
  }
  .box-card .el-form-item .el-row:last-child {
    border: none;
  }
  .update-pass {
    float: right;
    font-size: 14px;
    font-weight: normal;
    color: #ff7357;
  }
  .update-pass:hover {
    color: #d36432;
  }
  .item {
    margin-bottom: 18px;
  }
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .pdl10 {
    padding-left: 10px;
  }
  .form-header {
    /* padding-left: 10px; */
    color: #606266;
    font-weight: 700;
  }
  .form-header svg {
    color: #3fb2fe;
    font-size: 20px;
    margin-right: 10px;
  }
  .el-form-item__label {
    font-weight: normal;
  }
  .clearfix:after {
    clear: both
  }
  .el-card__header {
    background-color: #4fb1e2;
    color: #ffffff;
    line-height: 58px;
    padding: 0 10px 0 20px;
  }
  .el-card__header button {
    color: #ffffff;
    float: right;
    padding: 3px 0;
    margin: 15px 10px;
  }
  .el-card__header button i {
    font-size: 20px;
  }
  .el-card__header svg {
    font-size: 28px;
    float: right;
    padding: 3px 0;
    margin: 15px 5px;
    cursor: pointer;
  }
  .el-col:nth-child(3n){
    clear: right;
  }
  .back-link {
    color: #3fb2fe;
    font-size: 14px;
  }
  .back-link svg {
    font-size: 12px;
  }
  .el-transfer-panel__body {
    height: 203px;
  }
  .el-transfer-panel__list.is-filterable {
    height: 149px;
  }
  .el-transfer-panel .el-transfer-panel__header .el-checkbox .el-checkbox__label {
    font-size: 14px;
  }
  .el-col {
    margin-bottom: 0px!important;
  }
  .el-checkbox-button__inner {
    border-left: 1px solid #dcdfe6;
    border-radius: 0!important;
    margin-right: 10px;
  }
</style>
<script>
import { getUserInfo, updatePass } from '@/api/user'
export default {
  data() {
    // 数据校验
    const checkPass = (rule, value, callback) => {
      if (value.length < 6) {
        return callback(new Error('原始密码必须大于等于6位'))
      } else {
        callback()
      }
    }
    const checkNewPass = (rule, value, callback) => {
      if (value.length < 6) {
        return callback(new Error('新密码必须大于等于6位'))
      } else {
        callback()
      }
    }
    const checkReNewPass = (rule, value, callback) => {
      if (value.length < 6) {
        return callback(new Error('确认新密码必须大于等于6位'))
      } else if (value !== this.temp.pwd) {
        return callback(new Error('两次输入的新密码必须保持一致'))
      } else {
        callback()
      }
    }
    return {
      tableKey: 0,
      type: 'create',
      param: {},
      username: '',
      truename: '',
      status_text: '',
      level_text: '',
      temp: {
        oldpass: '',
        pwd: '',
        renewpass: ''
      },
      rules: {
        oldpass: [{ validator: checkPass, trigger: 'blur' }],
        pwd: [{ validator: checkNewPass, trigger: 'blur' }],
        renewpass: [{ validator: checkReNewPass, trigger: 'blur' }]
      },
      dialogFormVisible: false
    }
  },
  created() {
    this.initData()
  },
  methods: {
    // 初始化数据
    initData() {
      getUserInfo().then(response => {
        this.param = response.data
      })
    },
    // 修改密码显示
    handleUpdate() {
      this.dialogFormVisible = true
      this.$nextTick(() => {
        // 清空所有验证信息
        this.$refs['dataForm'].clearValidate()
      })
    },
    resetTemp() {
      this.temp = {
        oldpass: '',
        pwd: '',
        renewpass: ''
      }
    },
    // 修改密码操作
    updateData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          updatePass(this.temp).then(response => {
            this.dialogFormVisible = false
            this.resetTemp()
            this.$notify({
              title: '成功',
              message: '修改成功',
              type: 'success',
              duration: 2000
            })
          })
        }
      })
    }
  }
}
</script>
